<template>
    <el-dialog :model-value="visible" :title="add?$t('menu.addDialogTitle'):$t('menu.editDialogTitle')" width="800px" :before-close="cb=>cancelForm('userFormRef')">
        <el-form
            ref="userFormRef"
            inline
            :model="userForm"
            :rules="validateRules"
            label-width="100px"
        >
            <el-form-item :label="$t('menu.parent')" prop="parentId">
                <!-- <select-tree v-model="userForm.parentId" :data="menuSelectList" :props="{label: 'menuName',children: 'children',key:'menuId'}" class="table-item"/> -->
                <el-tree-select v-model="userForm.parentId" :data="menuSelectList" value-key="menuId" :props="{label: 'menuName',children: 'children'}" 
                   :render-after-expand='false' class="table-item" check-strictly @node-click="clickSelectTree">
                    
                </el-tree-select>
            </el-form-item>
            <el-form-item :label="$t('menu.menuName')" prop="menuName">
                <el-input v-model="userForm.menuName" class="table-item"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.menuCode')" prop="menuCode">
                <el-input v-model="userForm.menuCode" class="table-item"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.menuUrl')" prop="menuUrl">
                <el-input v-model="userForm.menuUrl" class="table-item"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.menuOrder')" prop="menuOrder">
                <el-input v-model.number="userForm.menuOrder" class="table-item"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.menuIcon')" prop="menuIcon">
                <el-select v-model="userForm.menuIcon" filterable class="table-item icon-select">
                    <template #prefix>
                        <el-icon><component v-if="userForm.menuIcon" :is="userForm.menuIcon"></component></el-icon>
                    </template>
                    <el-option
                    v-for="item in iconList"
                    :key="item"
                    :label="item"
                    :value="item"
                    >
                        <el-icon><component v-if="item" :is="item"></component></el-icon> {{item}}
                    </el-option>
                    
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('menu.component')" prop="component">
                <el-input v-model="userForm.component" class="table-item"></el-input>
            </el-form-item>
            <el-form-item :label="$t('menu.fullscreen')" prop="fullscreen">
                <el-checkbox v-model="userForm.fullscreen"></el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('menu.cache')" prop="cache">
                <el-checkbox v-model="userForm.cache"></el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('menu.tag')" prop="tag">
                <el-checkbox v-model="userForm.tag"></el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('menu.visible')" prop="visible">
                <el-checkbox v-model="userForm.visible"></el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('menu.parentMenu')" prop="menu"  v-if="!userForm.visible">
                <!-- <select-tree v-model="userForm.menu" :data="menuOptions" :props="{label: 'menuName',children: 'children',key:'menuCode'}" class="table-item" @node-click="clickInnerMenuTree"/> -->
                <el-tree-select v-model="userForm.menu" :data="menuOptions" value-key="menuCode" :props="{label: 'menuName',children: 'children'}" 
                   :render-after-expand='false' class="table-item" check-strictly @node-click="clickInnerMenuTree" />
            </el-form-item>
            <el-form-item :label="$t('menu.secondName')" prop="title">
                <el-input v-model="userForm.title"  class="table-item"></el-input>
            </el-form-item>
            
        </el-form>
        <template #footer>
                <el-button @click="cancelForm('userFormRef')" >{{$t('data.button.cancel')}}</el-button>
                <el-button type="primary" :loading="isSaveing" @click="submitForm('userFormRef')">{{$t('data.button.confirm')}}</el-button>
            </template>
    </el-dialog>
</template>
<script>
import * as Icons from '@element-plus/icons-vue'
export default {
    props:{
        form:{
            type:Object,
            default:()=>{
                return {
                }
            }
        },
        menuOptions:{
            type:Array,
            default:()=>{
                return []
            }
        },
        add:{
            type:Boolean,
            default:false
        },
        visible:{
            type:Boolean,
            default:false
        },
    },
    emits:['submit','close'],
    data(){
        return{
            userForm:this.form,
            isSaveing:false,
            validateRules:{
                menuName:[
                    {
                        required: true,
                        message: '请输入菜单名称',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                ],
                menuCode:[
                    {
                        required: true,
                        message: '请输入菜单编号',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    }
                ],
                menuOrder:[
                    {
                        required: true,
                        message: '请输入序号',
                        trigger: 'blur',
                    },
                    { type: 'number', message: '序号必须为数字' }
                ]
            }
        }
    },
    computed:{
        menuSelectList(){
            console.log([{menuId:'',menuName:this.$t('data.tree.rootText'),children:this.menuOptions}])
            return [{menuId:'',menuName:this.$t('data.tree.rootText'),children:this.menuOptions}]
        },
        iconList(){
            let arr=[]
            arr.push('')
            Object.keys(Icons).forEach(key => {
                arr.push(key=='Menu'?'IconMenu':key)
            })
            return arr;
        }
    },
    watch:{
        form:{
            handler:function(){
                this.userForm=this.form
                if(!this.userForm.menuOrder){
                    this.userForm.menuOrder=0
                }
                if(!this.userForm.parentId){
                    this.userForm.parentId=''
                }
                if(this.userForm.visible==undefined || this.userForm.visible==null){
                    this.userForm.visible=true
                    if(this.userForm.menu!=undefined && this.userForm.menu!=null && this.userForm.menu!=''){
                        this.userForm.visible=false
                    }
                }
                if(this.userForm.visible){
                    this.userForm.menu=null
                }
                if(this.userForm.tag==undefined || this.userForm.tag==null){
                    this.userForm.tag=true
                }
                if(this.userForm.fullscreen==undefined || this.userForm.fullscreen==null){
                    this.userForm.fullscreen=false
                }
                if(this.userForm.cache==undefined || this.userForm.cache==null){
                    this.userForm.cache=false
                }
            },
            deep: true
        }
    },
    methods:{
        submitForm(userFormRef){
            this.$refs[userFormRef].validate(valid=>{
                if(valid){
                    this.$emit('submit',this.userForm);
                }
            })
        },
        cancelForm(userFormRef){
            console.log('cancelForm',this.userForm)
            this.$refs[userFormRef].resetFields()
            this.$emit('close');
        },
        filterNode:function(value,data){
            if (!value) return true
            return data.label.includes(value)
        },
        clickInnerMenuTree(node){
            console.log('clickInnerMenuTree',node)
        },
        clickSelectTree(node,treeNode){
            console.log('clickSelectTree',node,treeNode)
            
        },
    }
}
</script>
<style scoped>
.table-item{
    width:246px;
}
</style>